<template>
  <div class="first">
      <p style="text-align: center;color: #fff;font-size: 26px;">我的信息</p>
      <div class="card">
          <div class="avatar">
              <img src="@/assets/avatar.jpg"/>
          
          </div>
     <div class="nickname">{{ username }}</div>
     <div class="address">
     <van-cell title="地址" icon="location-o"/>
     </div>
      </div>
  <div class="content">
      <van-cell title="完善信息" is-link />
      <van-cell title="查看记录" is-link />
      <van-cell title="意见反馈" is-link />
  </div>
  </div>
  
  </template>
  
  
  <script>
  import { getCurrentInstance,reactive,toRefs } from 'vue';
  export default {
      setup () {
          const {proxy } = getCurrentInstance()
          const state = reactive ({
              username: 'default'
          })
      state.username = localStorage.getItem('user');
      return{
          ...toRefs(state)
      };
          
      },
  }
  
  </script>
  
  <style>
  .first{
      width: 100%;
      height: 16rem;
      background-color: rgb(183,165,248);
      position: relative;
      display: flex;;
      justify-content:center;
  }
  
  .card{
    width: 80%;
    height: 15.625rem;
    border-radius: 0.625rem;
    background-color: #fff;
    position: absolute;
    bottom: -30px;
    box-shadow: 10px 10px 21px rgb(0 0 0 / 40%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .avatar {
      width: 7.5rem;
      height: 7.25rem;
      border-radius: 50%;
  }
  .avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
  }
  .nickname{
      color: rgb(204,202,202);
      margin-top: 10px;
  }
  .van-cell{
      color: rgb(204,202,202);
  }
  .content{
      margin-top: 16rem;
  }
  </style>











